<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  lang="zh-CN"
>
<head>
  <title>机架管理</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
  class="container"
>
  <div >
    <div class="container">
      <div class="myHeader">
        <div class="myHeader-title">
          新增机架信息
        </div>
      </div>
     <table
        width="100%"
        border="0"
        class="el-table el-table--border"
        cellspacing="0"
        cellpadding="0"
      >
        <tbody>
        <tr>
          <td
            width="200"
          >所在机房<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-select v-model="formData.houseId"
                       name="houseId"
                       v-validate="'required'"
                       @change="changeHouse">
              <el-option v-for="house in houses" :key="house.id" :value="house.id" :label="house.houseName"></el-option>
            </el-select>
            <div
              id="houseId_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseId:required')">请选择所在机房</span>
            </div>
          </td>
        </tr>
        <tr>
          <td
            width="200"
          >所在机房的区域<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-select
              v-model="formData.houseArea"
              name="areaId"
              v-validate="'required'"
            >
              <el-option v-for="area in areas" :value="area.id" :label="area.areaName" :key="area.id"></el-option>
            </el-select>
            <div
              id="areaId_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('areaId:required')">请选择所在区域</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>机架编号<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-input
              v-model="formData.frameCode"
              v-validate="'required|max:50|frame_code_validate'"
              data-vv-delay="1000"
              name="frameCode"
              maxlength="45"
              placeholder="请填写机架编号"
            ></el-input>
            <div
              id="frameCode_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('frameCode:required')">请填写机架编号</span>
              <span class="field-error" v-show="errors.has('frameCode:max')">机架编号长度最大为 50 位</span>
              <span class="field-error" v-show="errors.has('frameCode:frame_code_validate')">机架编号已存在</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>机架名称<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-input
              v-model="formData.frameName"
              v-validate="'required|max:100'"
              name="frameName"
              maxlength="45"
              placeholder="请填写机位名称"
            ></el-input>
            <div
              id="frameName_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('frameName:required')">请填写机位名称</span>
              <span class="field-error" v-show="errors.has('frameName:max')">机位名称长度最大为 100 位</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>机柜位置</td>
          <td class="ContentTD">
            <el-input
              v-model="formData.cabinetLocation"
              v-validate="'max:50'"
              name="cabinetLocation"
              placeholder="请填写机柜位置"
              maxlength="50"
            ></el-input>
            <div
              id="cabinetLocation_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('cabinetLocation:max')">机柜位置长度最大为 50 位</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>使用类型<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-radio-group v-model="formData.useType">
              <el-radio label="1">自用</el-radio>
              <el-radio label="2">出租</el-radio>
            </el-radio-group>
          </td>
        </tr>

        <tr>
          <td>分配状态<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-radio-group v-model="formData.distribution">
              <el-radio label="1">未分配</el-radio>
              <el-radio label="2">已分配</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>占用状态<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-radio-group v-model="formData.distribution">
              <el-radio label="1">未占用</el-radio>
              <el-radio label="2">已占用</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>机位信息
            <el-button
              size="mini"
              type="primary"
              @click="addPositionInfo"
            >新增</el-button>
          </td>
          <td class="ContentTD">
            <table
              id="tab_position"
              class="el-table el-table--border"
              name="tab_position"
              border="0"
              width="100%"
            >
              <tbody>
              <tr>
                <td>ID</td>
                <td>机位编号</td>
                <td>机位名称</td>
                <td>服务器数</td>
                <td></td>
              </tr>
              <tr v-for="(position,index) in formData.positions">
                <td>新增
                  <input
                  type="hidden"
                  v-model="position.id"
                  >
                </td>
                <td>
                  <el-input
                    show-word-limit
                    maxlength="50"
                    v-validate="'max:50|position_number_validate'"
                    data-vv-delay="1000"
                    :name="'positionNumber_'+index"
                    v-model="position.positionNumber"
                  ></el-input>
                  <span class="field-error" v-show="errors.has('positionNumber_'+index+':max')">机位编号长度最大为 50 位</span>
                  <span class="field-error" v-show="errors.has('positionNumber_'+index+':position_number_validate')">机位编号已存在</span>
                </td>
                <td>
                  <el-input
                    show-word-limit
                    maxlength="50"
                    v-model="position.name"
                    :name="'name_'+index"
                    v-validate="'max:50'"
                  ></el-input>
                  <span class="field-error" v-show="errors.has('name_'+index+':max')">机位名称长度最大为 50 位</span>
                </td>
                <td>
                  <el-input
                    show-word-limit
                    maxlength="9"
                    v-model="position.serverNumber"
                    :name="'serverNumber_'+index"
                    v-validate="'numeric|max:9'"
                  ></el-input>
                  <span class="field-error" v-show="errors.has('serverNumber_'+index+':numeric')">{{ errors.first('serverNumber_'+index) }}</span>
                  <span class="field-error" v-show="errors.has('serverNumber_'+index+':max')">服务器数长度最大为 9 位</span>
                </td>
                <td align="left">
                  <el-button
                    type="danger"
                    size="mini"
                    @click="deletePositionInfo(index)"
                  >删除</el-button>
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
        </tbody>
      </table>
      <div align="center">
        <el-button
          type="primary"
          @click="submitForm"
        >确认</el-button>
        <el-button
          @click="_forward('/basic-data/admin_frame_info')"
        >返回</el-button>
      </div>
    </div>
  </div>
</div>
</body>
<div layout:fragment="js">
  <script src="/static/js/component/BaseValidateVue.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseFrameInfoApi.js"></script>
  <script src="/static/js/module/basic-data/model/BasePosition.js"></script>
  <script src="/static/js/module/basic-data/add/admin_frame_info_add.js"></script>
</div>
</html>
